<template>
  <el-dialog width="66%" :title="dialogTitle" v-model="dialogVisible" modal draggable @close="closeDialog"
    :close-on-click-modal="false">
    <el-form class="dialog-form" :model="formData" ref="vForm" label-position="right" label-width="100px" size="medium"
      @submit.native.prevent :rules="formRules" :disabled="formDisabled">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="装具名称" prop="deviceName">
            <el-input v-model="formData.deviceName" placeholder="请输入装具名称" link clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在库房" prop="repositoryId">
            <el-select v-model="formData.repositoryId" placeholder="请选择库房" class="full-width-input"
              :disabled="formData.isCreateCol" clearable>
              <el-option v-for="item in repositoryOptions" :key="item.value" :label="item.label" :value="item.value"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-collapse v-model="activeNames">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-collapse-item name="1">
              <template slot="title">
                <span style="margin-left: 20px; font-weight: bold">存位信息</span>
              </template>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="库码" prop="storeCode">
                    <template #label>
                      <span>库码<hlepMessage messageText="库房编码"></hlepMessage></span>
                    </template>
                    <el-input v-model.number="formData.storeCode" placeholder="请输入整数" link clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="区号" prop="quNo">
                    <template #label>
                      <span>区号<hlepMessage messageText="区号"></hlepMessage></span>
                    </template>
                    <el-input v-model.number="formData.quNo" placeholder="请输入整数" link :disabled="formData.isCreateCol"
                      clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="列数" prop="colNum">
                    <template #label>
                      <span>列数<hlepMessage messageText="装具列数"></hlepMessage></span>
                    </template>
                    <el-input v-model.number="formData.colNum" placeholder="请输入整数" link :disabled="formData.isCreateCol"
                      clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="节数" prop="leNum">
                    <template #label>
                      <span>节数<hlepMessage messageText="装具每列节数"></hlepMessage></span>
                    </template>
                    <el-input v-model.number="formData.leNum" placeholder="请输入整数" link :disabled="formData.isCreateCol"
                      clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="层数" prop="divNum">
                    <template #label>
                      <span>层数<hlepMessage messageText="装具每列层数"></hlepMessage></span>
                    </template>
                    <el-input v-model.number="formData.divNum" placeholder="请输入整数" link :disabled="formData.isCreateCol"
                      clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="固定列号" prop="fixedColNo">
                    <template #label>
                      <span>固定列号<hlepMessage messageText="固定列号"></hlepMessage></span>
                    </template>
                    <el-input v-model.number="formData.fixedColNo" placeholder="请输入整数" link
                      :disabled="formData.isCreateCol" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="层宽（cm）" prop="divWidth">
                    <template #label>
                      <span>层宽<hlepMessage messageText="装具每个层架层宽"></hlepMessage></span>
                    </template>
                    <el-input v-model.number="formData.divWidth" placeholder="层宽（cm）" link
                      :disabled="formData.isCreateCol" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="位数" prop="posNum">
                    <template #label>
                      <span>位数<hlepMessage messageText="若装具具备盒定位功能，可填写位数"></hlepMessage></span>
                    </template>
                    <el-input v-model.number="formData.posNum" placeholder="请填写位数" link :disabled="formData.isCreateCol"
                      clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="列顺序" prop="colOrder">
                    <el-radio-group v-model="formData.colOrder" size="mini" :disabled="formData.isCreateCol">
                      <el-radio label="0" border>从左到右</el-radio>
                      <el-radio label="1" border>从右到左</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-col>
          <el-col :span="12">
            <el-collapse-item name="2">
              <template slot="title">
                <span style="margin-left: 20px; font-weight: bold">控制信息</span>
              </template>
              <!-- <el-row :gutter="20">
                <el-col :span="24"> -->
              <el-form-item label="设备IP" prop="deviceIp">
                <el-input v-model="formData.deviceIp" placeholder="请输入设备IP" link clearable></el-input>
              </el-form-item>
              <el-form-item label="识别码" prop="brandCode">
                <el-select v-model="formData.brandCode" placeholder="请选择识别码" @change="changeBrand"
                  class="full-width-input" clearable>
                  <el-option v-for="item in brandOptions" :key="item.brandId" :label="item.brandCode"
                    :value="item.brandCode" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="端口" prop="devicePort">
                <el-input v-model="formData.devicePort" placeholder="选择识别码之后自动填入端口" clearable type="number"></el-input>
              </el-form-item>
              <el-form-item label="协议" prop="verNo">
                <el-select v-model="formData.verNo" placeholder="请选择协议" class="full-width-input" clearable>
                  <el-option v-for="item in verOptions" :key="item.verId" :label="item.verNo" :value="item.verNo"
                    :disabled="item.disabled">
                    <span style="float: left">{{ item.verNo }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">
                      <span v-show="item.protocol == 0">http</span>
                      <span v-show="item.protocol == 1">https</span>
                      <span v-show="item.protocol == 2">socket客户端</span>
                      <span v-show="item.protocol == 3">socket服务端</span>
                      <span v-show="item.protocol == 4">websocket客户端</span>
                      <span v-show="item.protocol == 5">websocket服务端</span>
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- </el-col>
              </el-row> -->
              <!-- <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="高区" prop="loginName">
                    <el-input v-model="formData.loginName" placeholder="请输入管理账号"
                      link clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="低区" prop="loginName">
                    <el-input v-model="formData.loginName" placeholder="请输入管理账号"
                      link clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row> -->
            </el-collapse-item>
          </el-col>
        </el-row>
      </el-collapse>
      <!-- <el-row v-show="type = 'edit'">
        <el-col :span="12">
          <el-form-item prop="" label="创建列">
            <el-checkbox v-model="formData.checked"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <div v-if="!formDisabled" slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">取 消</el-button>
      <el-button type="primary" @click="submitForm()" size="mini">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDictItems } from '@/api/sys/dict'
import { dropDownByType } from '@/api/bas/brand'
import { dropDownByBrandCode } from '@/api/bas/brandVer'
import { getInfo, add, update } from '@/api/bas/cabinet'
import { dropDown } from '@/api/bas/repository'
import rule from '@/utils/rule'
export default {
  name: 'cabinetDialog',
  data() {
    return {
      activeNames: ['1', '2'],
      type: '',
      dialogTitle: '',
      dialogVisible: false,
      formData: {
        posNum: null,
        repositoryId: null,
      },
      formDisabled: false,
      formRules: {
        repositoryId: [{ required: true, message: '请选择库房', trigger: ['change', 'blur'] }],
        deviceName: [{ required: true, message: '请输入装具名称', trigger: 'blur' }],
        deviceType: [{ required: true, message: '请选择装具类型', trigger: 'change' }],
        // storeCode: [
        //   {
        //     required: true,
        //     message: '请输入库码',
        //     validator: rule.positiveNumber,
        //     trigger: 'blur',
        //   },
        // ],
        quNo: [
          {
            required: true,
            message: '请输入区号',
            validator: rule.positiveNumber,
            trigger: 'blur',
          },
        ],
        brandCode: [
          {
            required: true,
            message: '请选择品牌',
            trigger: 'change',
          },
        ],
        colNum: [
          {
            required: true,
            message: '请输入列数',
            validator: rule.positiveNumber,
            trigger: 'blur',
          },
        ],
        leNum: [
          {
            required: true,
            message: '请输入节数',
            validator: rule.positiveNumber,
            trigger: 'blur',
          },
        ],
        divNum: [
          {
            required: true,
            message: '请输入层数',
            validator: rule.positiveNumber,
            trigger: 'blur',
          },
        ],
        fixedColNo: [
          {
            required: true,
            message: '请输入固定列号',
            validator: rule.positiveNumber,
            trigger: 'blur',
          },
        ],
        divWidth: [
          {
            required: true,
            message: '请输入层宽',
            validator: rule.positiveNumber,
            trigger: 'blur',
          },
        ],
        posNum: [
          {
            message: '请输入位数',
            validator: rule.positiveNumber,
            trigger: 'blur',
          },
        ],
        // brandId: [{ required: true, message: '请选择品牌', trigger: 'change' }],
        // verId: [{ required: true, message: '请选择装具版本', trigger: 'change' }],
        deviceIp: [
          {
            validator: rule.validcodeip,
            message: '请输入合法的设备IP',
            trigger: 'blur',
          },
        ],
        // devicePort: [{ required: true, message: '请输入端口号', trigger: 'blur' }],
      },
      deviceTypeOptions: [],
      brandOptions: [], //品牌
      verOptions: [],
      repositoryOptions: [], //库房
    }
  },
  methods: {
    getDeviceType() {
      getDictItems('brand_type').then((res) => {
        if (res.data.code === 200) {
          this.deviceTypeOptions = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取品牌的列表
    changeDeviceType(value) {
      dropDownByType(value)
        .then((res) => {
          if (res.data.code === 200) {
            this.brandOptions = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    changeBrand(value) {
      // this.formData.devicePort = '2000'
      this.formData.devicePort = this.brandOptions.find((obj) => obj.brandCode === value).devicePort
      dropDownByBrandCode(value)
        .then((res) => {
          if (res.data.code === 200) {
            this.verOptions = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 获取库房的列表
    getRepository() {
      dropDown()
        .then((res) => {
          if (res.data.code === 200) {
            this.repositoryOptions = res.data.data
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    add() {
      this.changeDeviceType('0')
      this.getDeviceType()
      this.getRepository()
      this.formDisabled = false
      this.type = 'add'
      this.dialogTitle = '添加装具'
      // 先清空表单数据
      this.formData = {
        colOrder: '0',
        devicePort: '',
        posNum: null,
        repositoryId: '',
      }
      this.dialogVisible = true
    },
    edit(row) {
      this.changeDeviceType('0')
      this.getDeviceType()
      this.getRepository()
      this.formDisabled = false
      this.type = 'edit'
      this.dialogTitle = '编辑装具'
      getInfo(row.deviceId)
        .then((res) => {
          if (res.data.code === 200) {
            this.formData = res.data.data
            this.formData.colOrder = String(res.data.data.colOrder)
            // if (res.data.data.brandCode) {
            //   this.changeBrand(res.data.data.brandCode)
            // }
            this.$set(this.formData, 'devicePort', res.data.data.devicePort)
            this.dialogVisible = true
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    submitForm() {
      this.$refs['vForm'].validate((valid) => {
        if (valid) {


          // 如果posNum为'',传null

          if (this.formData.posNum === '' || this.formData.posNum === undefined) {
            this.formData.posNum = null
          }
          if (this.type === 'add') {
            add(this.formData)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success('添加成功')
                  this.closeDialog()
                  this.$emit('ok')
                } else {
                  this.$message.warning(res.data.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          } else {
            update(this.formData)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success('修改成功')
                  this.closeDialog()
                  this.$emit('ok')
                } else {
                  this.$message.warning(res.data.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          }
        }
      })
    },
    closeDialog() {
      this.$refs['vForm'].resetFields()
      this.dialogVisible = false
    },
  },
  watch: {
    'formData.brandCode'(newval) {
      // 将这个值改为响应式的
      this.$set(this.formData, 'verId', '')
    },
  },
}
</script>

<style scoped lang="less">
.el-collapse {
  border-top: none;
  border-bottom: none;
}

.el-collapse-item__header {
  background-color: #fafafa;
}

.el-collapse-item__content {
  margin: 15px 10px 0 0;
}

.el-collapse-item {
  border: 1px solid #ebeef5;
}

.el-row {
  margin-bottom: 0;
}

.el-col {
  padding-right: 15px !important;
}
</style>
